<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- required meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- #keywords -->
    <meta name="keywords" content="boot, Bootstrap, It Solutions , Business Services, Techxly HTML Template">
    <!-- #description -->
    <meta name="description" content="IT Solutions & Business Services Multipurpose Responsive Website Template">
    <!-- #title -->
    <title>Techxly - IT Solutions & Business Services Template</title>
    <!-- #favicon -->
    <link rel="shortcut icon" href="assets/images/fav.png" type="image/x-icon">
    <!-- AOS  -->
    <link rel="stylesheet" href="static/css/aos.css">
    <!-- ==== css dependencies start ==== -->
    <link rel="stylesheet" href="static/css/style.css">
    <!-- tilt  -->
    <!-- ICON  -->
    <script src="static/js/web.js"></script>
    <!-- lightbox  -->
    <link rel="stylesheet" href="static/css/glightbox.min.css">
  </head>

  <body>
    <button id="rtlBtn">rtl</button>
    <!-- header-section start -->
    <header class="header-section header-menu w-100 pt-1 pt-lg-0 pb-3 pb-lg-0">
      <div class="navbar_mainhead header-fixed w-100">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-12">
              <nav class="navbar navbar-expand-lg position-relative d-flex gap-5 align-items-center">
                <div>
                  <a href="" class="navbar-brand d-none d-sm-flex align-items-center gap-2">
                    <img src="static/picture/logo.png" class="logo" alt="logo">
                  </a>
                  <a href="" class="navbar-brand d-sm-none d-flex align-items-center gap-2">
                    <img src="static/picture/fav.png" class="shortlogo" alt="logo">
                  </a>
                </div>
                <div class="collapse navbar-collapse" id="navbar-content">
                  <ul class="navbar-nav d-flex align-items-lg-center gap-5 gap-lg-1 gap-xl-4 gap-xxl-5 py-2 py-lg-0 ms-2 ms-xl-10 ms-xxl-20 ps-0 ps-xxl-10 align-self-center">
                    <li class="dropdown">
                      <a href="" class="fs-ten">Home</a>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="services.html" class="fs-ten">Services</a>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="testimonials.html" class="fs-ten">Testimonials</a>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="team.html" class="fs-ten">Team</a>
                    </li>
                    <li class="dropdown show-dropdown dropdown_btn">
                      <button type="button" aria-label="Navbar Dropdown Button" class="dropdown-toggle dropdown-nav d-flex gap-1 align-items-center fs-ten">
                        Menu <i class="ph-bold ph-caret-down"></i>
                      </button>
                      <ul class="dropdown-menu drop_menu">
                        <li>
                          <a class="dropdown-item fs-ten" href="about.html">About</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="blog_details.html">Blog Details</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="price.html">Pricing</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="faqs.html">FAQs</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="contact.html">Contact</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="terms.html">Terms Conditions</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="privacy.html">Privacy Policy</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="blog.html" class="fs-ten">Blog</a>
                    </li>
                  </ul>
                </div>
                <div>
                  <div class="right-area custom-pos position-relative d-flex gap-0 gap-xl-5 align-items-center">
                    <button id="toggle" class="dark_btn d-flex justify-content-center align-items-center fs-three p6-color mood_toggle">
                      <i class="ph-fill ph-moon fs-five" id="mood_icon"></i>
                    </button>
                    <a href="contact.html" class="btn p6-color d-none d-xl-block">
                      <span class="btn-text-one">Get Quotes</span>
                      <span class="btn-text-two">Get Quotes</span>
                    </a>
                  </div>
                  <button class="navbar-toggler mt-1" type="button" data-bs-toggle="collapse" aria-label="Navbar Toggler" data-bs-target="#navbar-content" aria-expanded="true" id="nav-icon3">
                    <span></span><span></span><span></span><span></span>
                  </button>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- header-section end -->

    <!-- Hero section start -->
    <section class="hero-bg overflow-hidden">
      <div class="particles_hero">
        <div class="container h-100">
          <div class="row g-lg-6 align-items-center pt-20 h-100">
            <div class="col-xxl-7 h-100 hero-bg-content">
              <div class="d-flex align-items-center justify-content-center h-100">
                <div>
                  <div data-aos="fade-up" data-aos-duration="800" class="hero_hot w-100 d-flex gap-3 align-items-center px-3 px-lg-5 py-2 py-lg-3 rounded-pill mb-3 mb-lg-6">
                    <button class="px-3 px-lg-5 py-2 rounded-pill w3-color bg3-color">
                      🚀 New
                    </button>
                    <span class="w3-color">Next - Level IT Solutions</span>
                  </div>
                  <h2 class="display-two fw-bold mb-3 mb-lg-5 w3-color" data-aos="fade-up" data-aos-duration="800">
                    Trusted
                    <span class="y1-color">IT Solutions</span>
                    & Cyber Security
                  </h2>
                  <div class="d-flex flex-wrap align-items-center gap-4 gap-md-8 align-items-center">
                    <div class="d-flex gap-2 align-items-center">
                      <img src="static/picture/quality.png" alt="...">
                      <span class="fs-ten w3-color">Supreme Quality Services</span>
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                      <img src="static/picture/satisfaction.png" alt="...">
                      <span class="fs-ten w3-color">Promise of Satisfaction</span>
                    </div>
                  </div>
                  <div data-aos="fade-down" data-aos-duration="800">
                    <div class="d-flex flex-wrap gap-3 gap-md-6 my-5 my-md-10" data-aos="fade-down">
                      <a href="contact.html" class="btn">
                        <span class="btn-text-one d1-color">Get Quotes</span>
                        <span class="btn-text-two d1-color">Get Quotes</span>
                      </a>
                      <button class="btn-outline w2-color">
                        <span class="btn-text-one">Get Started</span>
                        <span class="btn-text-two">Get Started</span>
                      </button>
                    </div>
                    <div class="d-flex flex-wrap gap-3">
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-facebook-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-x-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-linkedin-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-youtube-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-instagram-logo fs-six"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xxl-5 d-none d-xxl-block">
              <div data-tilt="">
                <img src="static/picture/hero-img.png" alt="hero" class="hero-img object-fit-cover">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Hero section end -->

    <!-- service section start  -->
    <section class="position-relative pt-120 pb-120">
      <div class="container">
        <div class="d-flex flex-wrap gap-6 justify-content-between align-items-end" data-aos="fade-down" data-aos-duration="800">
          <div class="service_heading">
            <span class="fs-ten fw-semibold g2-color mb-2">Our Services</span>
            <h2 class="fs-two fw-semibold d1-color mb-6">
              What We’re <span class="y2-color">Offering?</span>
            </h2>
            <p class="fs-ten d2-color">
              Techxly is a HTML5 template based on Sass and Bootstrap 5 with
              modern and creative multipurpose design you can use Best services
              & IT solutions.
            </p>
          </div>
          <div>
            <a href="services.html" class="btn d1-color">
              <span class="btn-text-one">See Services</span>
              <span class="btn-text-two">See Services</span>
            </a>
          </div>
        </div>
        <div class="row g-3 g-sm-5 mt-7 mt-lg-15">
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/apps.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Apps Development
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/web.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Web Development
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="900">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/degital.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Digital Marketing
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/seo.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                SEO Optimization
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/hosting.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Web Hosting
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="900">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/security.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Data Secuity
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="rocket-img d-none d-xl-block">
        <img src="static/picture/rocket.png" alt="rocket">
      </div>
    </section>
    <!-- service section end  -->

    <!-- Our Process Flow start -->
    <section class="process-work-bg pt-120 pb-120 bg7-color">
      <div class="container">
        <div class="d-flex align-items-center justify-content-between">
          <div class="service_heading" data-aos="fade-down" data-aos-duration="800">
            <span class="fs-ten fw-semibold g1-color mb-2">Our Work Process</span>
            <h2 class="fs-two fw-semibold w3-color">
              How it helps your <span class="y1-color">business succeed</span>
            </h2>
            <p class="w3-color mt-4 mt-md-8">
              Techxly is a HTML5 template based on Sass and Bootstrap 5 with
              modern and creative multipurpose design you can use Best services
              & IT solutions.
            </p>
          </div>
          <div class="d-none d-md-flex align-items-center gap-2 position-relative pe-20 z-2">
            <div class="step-line"></div>
            <span class="w3-color fs-five fw-semibold">STEPS</span>
            <h1 class="work-step">03</h1>
          </div>
        </div>
        <div class="row g-5 mt-7 mt-lg-15">
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="">
              <div class="d-flex align-items-center gap-10">
                <div class="process_icon_bg d-flex flex-shrink-0 justify-content-center align-items-center position-relative">
                  <img src="static/picture/service.png" alt="apps" width="60" height="60">
                  <div class="process_icon_num d-flex justify-content-center align-items-center position-absolute">
                    01
                  </div>
                </div>
                <div class="h-100">
                  <img src="static/picture/arrow.png" alt="..." class="arrow-img d-none d-xl-block">
                </div>
              </div>
              <h4 class="fs-five fw-semibold w3-color mt-4 mt-md-8 mb-2 mb-md-4">
                Choose a Service
              </h4>
              <p class="w4-color fs-ten">
                We focus on the best practices for it solutions and services.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="">
              <div class="d-flex align-items-center gap-10">
                <div class="process_icon_bg d-flex flex-shrink-0 justify-content-center align-items-center position-relative">
                  <img src="static/picture/meeting.png" alt="apps" width="60" height="60">
                  <div class="process_icon_num d-flex justify-content-center align-items-center position-absolute">
                    02
                  </div>
                </div>
                <div class="h-100">
                  <img src="static/picture/arrow.png" alt="..." class="arrow-img d-none d-xl-block">
                </div>
              </div>
              <h4 class="fs-five fw-semibold w3-color mt-4 mt-md-8 mb-2 mb-md-4">
                Request a Meeting
              </h4>
              <p class="w4-color fs-ten">
                We focus on the best practices for it solutions and services.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="">
              <div class="">
                <div class="process_icon_bg d-flex flex-shrink-0 justify-content-center align-items-center position-relative">
                  <img src="static/picture/service.png" alt="apps" width="60" height="60">
                  <div class="process_icon_num d-flex justify-content-center align-items-center position-absolute">
                    03
                  </div>
                </div>
              </div>
              <h4 class="fs-five fw-semibold w3-color mt-4 mt-md-8 mb-2 mb-md-4">
                Receive Custom Plan
              </h4>
              <p class="w4-color fs-ten">
                We focus on the best practices for it solutions and services.
              </p>
            </div>
          </div>
        </div>
        <div class="process-ready mt-8 mt-md-15 p-5 p-md-10">
          <div class="d-flex flex-wrap gap-3 justify-content-between">
            <div class="d-flex flex-wrap gap-3 gap-md-6">
              <div>
                <img src="static/picture/img1.png" alt="..." class="process-work-img">
                <img src="static/picture/img2.png" alt="..." class="process-work-img2">
                <img src="static/picture/img3.png" alt="..." class="process-work-img2">
              </div>
              <div>
                <span class="fs-seven w3-color d-block mb-1 mb-md-2">Ready to Get</span>
                <span class="fs-ten g1-color">Let’s Discuss & Start IT Consultations</span>
              </div>
            </div>
            <a href="contact.html" class="btn">
              <span class="btn-text-one d1-color">Get Quotes</span>
              <span class="btn-text-two d1-color">Get Quotes</span>
            </a>
          </div>
        </div>
      </div>
    </section>
    <!-- Our Process Flow End -->

    <!-- Who we are section start -->
    <section class="pt-120 overflow-hidden">
      <div class="container">
        <div class="row g-7 g-md-10 pb-120">
          <div class="col-xl-6">
            <div class="position-relative">
              <img src="static/picture/who.png" alt="...">

              <div class="who-text-rotate d-none d-sm-block">
                <div class="position-relative">
                  <img src="static/picture/text-rotate.png" alt="..." class="rotate-animain">
                  <img src="static/picture/toppy.png" alt="topy" class="position-absolute start-0 end-0 top-0 bottom-0 m-auto">
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="service_heading" data-aos="fade-down" data-aos-duration="800">
              <span class="fs-ten fw-semibold g1-color mb-2">Who we are</span>
              <h2 class="fs-two fw-semibold d1-color">
                We provide perfect How it helps your
                <span class="y2-color text-decoration-underline">it solutions & technology</span>
                for any startups
              </h2>
              <p class="d2-color mt-4 mt-md-8">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative multipurpose design you can use Best
                services & IT solutions.
              </p>
              <div class="d-flex align-items-center gap-4 gap-md-8 mt-4 mt-md-8">
                <img src="static/picture/code.png" alt="...">
                <p class="text-five fw-semibold d2-color code-title">
                  We provide the most reasonable cost and best services.
                </p>
              </div>
              <div class="line my-4 my-md-8"></div>
              <div class="row g-3 g-md-6">
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Quality control system</span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Finish work before deadline</span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Best ever plan</span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Client free service</span>
                  </div>
                </div>
              </div>
              <a href="contact.html" class="btn mt-4 mt-md-8">
                <span class="btn-text-one d1-color">Get Quotes</span>
                <span class="btn-text-two d1-color">Get Quotes</span>
              </a>
            </div>
          </div>
        </div>

        <!-- trusted clients -->
        <div class="trusted-clients row g-5 g-lg-0 justify-content-center align-items-center bg2-color py-20">
          <div class="col-xl-4 px-4 px-sm-8 px-xl-0">
            <span class="fs-ten fw-medium g1-color">5+ Trusted Our Clients</span>
            <h2 class="fs-two fw-semibold w3-color mt-2">
              Most Experienced
              <span class="y1-color text-decoration-underline">Our Services</span>
            </h2>
            <p class="fs-ten w4-color mt-4 mt-md-8">
              Techxly is a HTML5 template based on Sass and Bootstrap 5 with
              modern and creative.
            </p>
          </div>
          <div class="col-xl-6">
            <div class="row">
              <div class="col-6 col-md-4">
                <div class="trusted-counter px-4 px-md-8 py-5 py-md-10">
                  <div class="trusted-img-bg">
                    <img src="static/picture/happy-clients.png" alt="...">
                  </div>
                  <h2 class="fs-two fw-semibold y1-color text-center mt-2 mt-md-4">
                    <span class="counter">130</span>+
                  </h2>
                  <span class="w3-color text-center d-block">Happy Clients</span>
                </div>
              </div>
              <div class="col-6 col-md-4">
                <div class="trusted-counter px-4 px-md-8 py-5 py-md-10">
                  <div class="trusted-img-bg">
                    <img src="static/picture/done.png" alt="...">
                  </div>
                  <h2 class="fs-two fw-semibold y1-color text-center mt-2 mt-md-4">
                    <span class="counter">250</span>+
                  </h2>
                  <span class="w3-color text-center d-block">Projects Done</span>
                </div>
              </div>
              <div class="col-6 col-md-4">
                <div class="trusted-counter px-4 px-md-8 py-5 py-md-10">
                  <div class="trusted-img-bg">
                    <img src="static/picture/experts.png" alt="...">
                  </div>
                  <h2 class="fs-two fw-semibold y1-color text-center mt-2 mt-md-4">
                    <span class="counter">50</span>+
                  </h2>
                  <span class="w3-color text-center d-block">Skilled Experts</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Who we are section end -->

    <!-- our skills section start -->
    <section class="our-skills-section pt-120 pb-120">
      <div class="container pt-120">
        <div class="row g-6 justify-content-between align-items-center">
          <div class="col-lg-5">
            <span class="fs-ten fw-medium g1-color">OUR SKILLS</span>
            <h2 class="fs-two fw-semibold text-white mt-2">
              Explore our best recently
              <span class="y1-color">completed projects</span>
            </h2>
            <a href="contact.html" class="btn mt-5 mt-md-10">
              <span class="btn-text-one d1-color">Our Service</span>
              <span class="btn-text-two d1-color">Our Service</span>
            </a>
          </div>
          <div class="col-lg-6">
            <div class="">
              <div data-aos="fade-up">
                <div class="progress-bar-wrap">
                  <div class="mb-1 d-flex justify-content-between">
                    <span class="text-white fs-ten fw-semibold mb-2 d-block">DEVELOPMENT</span>
                    <span class="progress-value text-white fs-ten fw-semibold">85%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                  </div>
                </div>
                <div class="progress-bar-wrap mt-3 mt-md-6">
                  <div class="mb-1 d-flex justify-content-between">
                    <span class="text-white fs-ten fw-semibold mb-2 d-block">ENGINEERING</span>
                    <span class="progress-value text-white fs-ten fw-semibold">69%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                  </div>
                </div>
                <div class="progress-bar-wrap mt-3 mt-md-6">
                  <div class="mb-1 d-flex justify-content-between">
                    <span class="text-white fs-ten fw-semibold mb-2 d-block">WEB DESIGN</span>
                    <span class="progress-value text-white fs-ten fw-semibold">76%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- our skills section end -->

    <!-- Choose us section end -->
    <section class="pt-120 pb-120 overflow-hidden">
      <div class="container">
        <div class="row g-5 g-md-10 align-items-center">
          <div class="col-xl-7">
            <div class="h-100">
              <div class="service_heading" data-aos="fade-down" data-aos-duration="800">
                <span class="fs-ten fw-semibold g1-color mb-2">Why Choose Us</span>
                <h2 class="fs-two fw-semibold d2-color mb-6 w-100">
                  We provide perfect it solutions & technology for any startups.
                </h2>
                <p class="fs-ten d2-color">
                  Start work with Techxly. Build responsive, mobile-first
                  projects on the web with the world's most popular front-end
                  component library.
                </p>
              </div>
              <div class="mt-8 mt-lg-15">
                <div class="row g-4 g-lg-8">
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="800">
                    <img src="static/picture/high-security.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      High Security
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="900">
                    <img src="static/picture/team.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      Skilled Team
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="800">
                    <img src="static/picture/price.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      Affordable Price
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="900">
                    <img src="static/picture/support.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      24/7 Support
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                </div>
              </div>
              <div class="mt-6 mt-lg-12 d-flex flex-wrap gap-4 gap-lg-8 d-flex align-items-center" data-aos="fade-up" data-aos-duration="800">
                <a href="contact.html" class="btn d1-color">
                  <span class="btn-text-one">Get Quotes</span>
                  <span class="btn-text-two">Get Quotes</span>
                </a>
                <div class="d-flex align-items-center gap-lg-5">
                  <div class="d-flex">
                    <div class="choose_icon_width bgy2-color d-flex flex-shrink-0 justify-content-center align-items-center">
                      <i class="ph ph-phone-call text-white fs-three"></i>
                    </div>
                  </div>
                  <a href="tel:+4733378901" class="choose-num d2-color fw-semibold fs-six">(+44) 152-567-987</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-5" data-aos="zoom-in" data-aos-duration="800">
            <div class="">
              <img class="choose_us object-fit-cover" src="static/picture/choose_us.png" alt="...">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Choose us section End -->

    <!-- INDUSTRY WE SERVE section start -->
    <section class="industry-section pt-120 pb-120 overflow-hidden">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down" data-aos-duration="800">
          <span class="fs-ten g1-color">INDUSTRY WE SERVE</span>
          <h3 class="w3-color fs-two">
            Our industry
            <span class="y2-color text-decoration-underline">expertise & solutions</span>
          </h3>
          <p class="fs-ten w3-color mt-3 mt-md-6">
            Techxly is a HTML5 template based on Sass and Bootstrap 5 with
            modern and creative.
          </p>
        </div>
        <div class="pt-60 position-relative">
          <div class="swiper service_slider">
            <div class="swiper-wrapper d-flex align-items-center">
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-8 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-graduation-cap fs-four"></i>
                    </div>
                    <span class="text-sm w-100 w3-color d-block mt-3 mt-md-5 text-center">Education</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-shopping-cart fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">eCommerce</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-heartbeat fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Healthcare</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-bank fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Finance</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-car fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Automotive</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-laptop fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Software</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-heartbeat fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Healthcare</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-bank fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Finance</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-car fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Automotive</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-laptop fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Software</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- INDUSTRY WE SERVE section end -->

    <!-- Protfolio section start -->
    <section class="pt-120 bg7-color overflow-hidden">
      <div class="process_heading text-center" data-aos="fade-down" data-aos-duration="800">
        <span class="fs-ten fw-semibold g1-color mb-2 text-center">Recent Work Highlights</span>
        <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
          Highlighting Our Most Notable Work and
          <span class="y2-color text-decoration-underline">Successful Projects</span>
        </h2>
        <p class="fs-ten d2-color">
          Techxly is a HTML5 template based on Sass and Bootstrap 5 with modern
          and creative multipurpose design you can use Best services & IT
          solutions.
        </p>
      </div>
      <!-- tab -->
      <div>
        <ul data-aos="zoom-in" data-aos-duration="800" class="tabs d-flex gap-3 gap-md-0 justify-content-center flex-wrap p-2 mt-8 mt-lg-15 mb-4 md:mb-8">
          <li data-tab-target="#all" class="active cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            All
          </li>
          <li data-tab-target="#branding" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            Branding
          </li>
          <li data-tab-target="#design" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            Design
          </li>
          <li data-tab-target="#development" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            Development
          </li>
          <li data-tab-target="#solution" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            It Solution
          </li>
        </ul>

        <div class="tab-content position-relative">
          <div id="all" data-tab-content="" class="active">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w1.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w4.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w6.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- branding -->
          <div id="branding" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w6.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- degine -->
          <div id="design" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w4.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- development -->
          <div id="development" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w6.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- solution -->
          <div id="solution" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w1.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w4.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Protfolio section end  -->

    <!-- Choose plan section start -->
    <section class="pt-120 pb-120">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down" data-aos-duration="800">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">Choose Your Plan</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Choose the right plan for
            <span class="y2-color text-decoration-underline">your business</span>
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="mt-8 mt-lg-15">
          <div class="row g-6">
            <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
              <div class="position-relative pricing_section">
                <div class="bgc1-color pricing-card">
                  <div class="px-4 px-lg-8 pt-5 pt-lg-10">
                    <h4 class="fs-seven d2-color fw-normal wider">STARTUP</h4>
                    <div class="d-flex gap-1">
                      <h3 class="display-one fw-semibold p2-color">$29</h3>
                      <span class="fs-three p2-color fw-semibold">$</span>
                    </div>
                    <span class="fs-ten fw-normal d3-color wider">Per Month</span>

                    <ul class="my-5 my-md-10">
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Web & Mobile-Optimizeds</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Free Custom Domain Serve</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Best Hosting on the Market</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Outstanding Support</span>
                      </li>
                    </ul>
                  </div>
                  <a href="javascript:void(0)" class="d-flex justify-content-center align-items-center gap-1 bgd1-color fs-six w2-color w-100 py-2 py-md-4 price_btn">
                    Purchase Now
                    <i class="ph ph-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
              <div class="position-relative pricing_section">
                <div class="bgc1-color pricing-card">
                  <div class="px-4 px-lg-8 pt-5 pt-lg-10">
                    <h4 class="fs-seven d2-color fw-normal wider">STANDARD</h4>
                    <div class="d-flex gap-1">
                      <h3 class="display-one fw-semibold p2-color">$49</h3>
                      <span class="fs-three p2-color fw-semibold">$</span>
                    </div>
                    <span class="fs-ten fw-normal d3-color wider">Per Month</span>

                    <ul class="my-5 my-md-10">
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Web & Mobile-Optimizeds</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Free Custom Domain Serve</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Best Hosting on the Market</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Outstanding Support</span>
                      </li>
                    </ul>
                  </div>
                  <a href="javascript:void(0)" class="d-flex justify-content-center align-items-center gap-1 bgd1-color fs-six w2-color w-100 py-2 py-md-4 price_btn">
                    Purchase Now
                    <i class="ph ph-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
              <div class="position-relative pricing_section">
                <div class="bgc1-color pricing-card">
                  <div class="px-4 px-lg-8 pt-5 pt-lg-10">
                    <h4 class="fs-seven d2-color fw-normal wider">PREMIUM</h4>
                    <div class="d-flex gap-1">
                      <h3 class="display-one fw-semibold p2-color">$99</h3>
                      <span class="fs-three p2-color fw-semibold">$</span>
                    </div>
                    <span class="fs-ten fw-normal d3-color wider">Per Month</span>

                    <ul class="my-5 my-md-10">
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Web & Mobile-Optimizeds</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Free Custom Domain Serve</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Best Hosting on the Market</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Outstanding Support</span>
                      </li>
                    </ul>
                  </div>
                  <a href="javascript:void(0)" class="d-flex justify-content-center align-items-center gap-1 bgd1-color fs-six w2-color w-100 py-2 py-md-4 price_btn">
                    Purchase Now
                    <i class="ph ph-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Choose plan section end -->

    <!-- Our clients section start -->
    <section class="pt-120 pb-120 our_clients overflow-x-hidden">
      <div class="container">
        <div class="service_heading">
          <span class="fs-ten fw-semibold g2-color mb-2">Our Clients</span>
          <h2 class="fs-two fw-semibold d1-color mb-6">
            We love to work with
            <span class="y2-color text-decoration-underline">clients to develop
            </span>
            unique, innovative websites.
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>

        <div class="mt-8 mt-md-15" data-aos="zoom-out-up">
          <div class="swiper clients_slider">
            <div class="swiper-wrapper d-flex align-items-center">
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner1.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner2.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner3.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner4.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner5.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner6.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner7.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner8.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner9.png" alt="logo">
                </div>
              </div>
            </div>
          </div>
          <div class="swiper clients_slider2 mt-4 mt-md-8">
            <div class="swiper-wrapper d-flex align-items-center">
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner1.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner2.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner3.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner4.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner5.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner6.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner7.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner8.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner9.png" alt="logo">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Our clients section end -->

    <!-- Testimonials section start -->
    <section class="testimonial pt-120 pb-120">
      <div class="process_heading text-center">
        <span class="fs-ten fw-semibold g2-color mb-2 text-center">💖 Real results from real clients</span>
        <h2 class="fs-two fw-semibold d1-color mb-4 mb-md-8">
          See how we've helped our
          <span class="y2-color text-decoration-underline">clients succeed</span>
        </h2>
        <p class="fs-ten d2-color">
          More than 1500+ agencies using Techxly.Build faster websites with
          techxly. IT’s a highly Customizable,creative, modern, visually
          stunning and Bootstrap5 HTML5 Template.
        </p>
      </div>
      <div class="mt-8 mt-lg-15 container">
        <div class="swiper testimonial_slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  �?I highly recommend techxly to anyone looking for a
                  high-quality Bootstrap theme.�?                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team3.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Dennis Maxwell</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  Techxly is the perfect theme for businesses that want to
                  create a stylish and functional website.
                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team5.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Jhon Doe</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  Techxly helped us create a stunning website that reflects our
                  brand perfectly.
                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team6.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Rose Li</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  �?I highly recommend techxly to anyone looking for a
                  high-quality Bootstrap theme.�?                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team7.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Russel Stevens</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Testimonials section end -->

    <!-- Discuss project section start -->
    <section class="dicscuss_projects parallax overflow-hidden">
      <div class="container pt-120 pb-120">
        <div class="row">
          <div class="col-lg-6"></div>
          <div class="col-lg-6">
            <div class="d-flex align-items-center justify-content-center px-2 px-md-5">
              <div class="dicscuss-content">
                <span class="fs-ten fw-semibold g2-color mb-2">We Carry More Than Just Good Coding Skills</span>
                <h2 class="fs-two fw-semibold w3-color mb-3 mb-lg-6">
                  Let's Discuss your <span class="y1-color">Projects</span>
                </h2>
                <p class="fs-ten w3-color">
                  We pride ourselves with our ability to perform and deliver
                  results. Use the form below to discuss your project needs with
                  our team, we will get back asap.
                </p>
                <div class="mt-5 mt-lg-10 d-flex flex-wrap gap-4 gap-lg-8 d-flex align-items-center">
                  <a href="contact.html" class="btn">
                    <span class="btn-text-one d1-color">Get Quotes</span>
                    <span class="btn-text-two d1-color">Get Quotes</span>
                  </a>
                  <div class="d-flex align-items-center gap-3 gap-lg-5">
                    <div class="d-flex">
                      <div class="choose_icon_width bgg1-color d-flex justify-content-center align-items-center">
                        <i class="ph ph-phone-call text-white fs-three"></i>
                      </div>
                      <div class="choose_icon_width choose_img">
                        <img src="static/picture/chooseImg.png" alt="...">
                      </div>
                    </div>
                    <a href="tel:+4733378901" class="w3-color fw-semibold fs-six">(+44) 152-567-987</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Discuss project section end -->

    <!-- Our Team Section star -->
    <section class="pt-120 pb-120">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-up" data-aos-duration="800">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">Our Team</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Meet the
            <span class="y2-color text-decoration-underline">Masterminds</span>
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="row g-6 mt-8 mt-md-15">
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team1.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team1.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Manny Danile
                </h4>

                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team2.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team2.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Kenna Lara
                </h4>
                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team3.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team3.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Jhone Doe
                </h4>
                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team4.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team4.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Afa Rose
                </h4>
                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Our Team Section end -->

    <!-- man user video section start -->
    <section class="man-user-video">
      <div class="d-flex gap-2 align-items-center justify-content-center h-100">
        <a href="#" class="glightbox3">
          <div class="video-btn cursor brn1 n1-color d-flex align-items-center justify-content-center video-modal-button-open">
            <i class="ph-fill ph-play fs-two y2-color"></i>
          </div>
        </a>
      </div>
    </section>
    <!-- man user video section end -->

    <!-- Blogs section star -->
    <section class="pt-120 pb-120 overflow-hidden">
      <div class="container">
        <div class="d-flex flex-wrap gap-2 justify-content-between align-items-end">
          <div>
            <span class="fs-ten g2-color fw-medium">Our News Updates</span>
            <h3 class="fs-two d1-color fw-semibold mt-2 mb-3 mb-md-6">
              Latest articles & news From the blogs
            </h3>
            <span class="d2-color fs-ten">More than 1500+ agencies using Techxly
            </span>
          </div>
          <a href="contact.html" class="btn">
            <span class="btn-text-one d1-color">All Articles</span>
            <span class="btn-text-two d1-color">All Articles</span>
          </a>
        </div>
        <div class="row g-6 mt-8 mt-md-15">
          <div class="col-md-6 col-lg-4">
            <div class="blog_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog1.jpg" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog1.jpg" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="p-5">
                <span class="p2-color p-2 bg21-color rounded-pill">STARTUP</span>
                <a href="javascript:void(0)" class="fs-five d1-color mt-2 mt-md-3 mb-3 mb-md-6 d-block fw-bold">
                  You will destroy yourself financially if you save
                </a>
                <div class="d-flex gap-2 flex-wrap justify-content-between align-items-center">
                  <div class="d-flex gap-2 align-items-center">
                    <img src="static/picture/team3.png" alt=" testimon" class="testimonial_img">

                    <span class="fs-eleven d-block d2-color fw-medium">Dennil Sami</span>
                  </div>
                  <span class="d2-color">Jan 26, 2024 </span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="blog_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog2.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog2.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="p-5">
                <span class="y2-color p-2 bgy21-color rounded-pill">DOMAIN & HOSTING</span>
                <a href="javascript:void(0)" class="fs-five d1-color mt-2 mt-md-3 mb-3 mb-md-6 d-block fw-bold">
                  How to host website on any hosting provider?
                </a>
                <div class="d-flex gap-2 flex-wrap justify-content-between align-items-center">
                  <div class="d-flex gap-2 align-items-center">
                    <img src="static/picture/team5.png" alt=" testimon" class="testimonial_img">

                    <span class="fs-eleven d-block d2-color fw-medium">Jhone Doe</span>
                  </div>
                  <span class="d2-color">Apr 16, 2024 </span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="blog_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog3.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog3.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="p-5">
                <span class="g2-color p-2 bgg21-color rounded-pill">STRATEGY</span>
                <a href="javascript:void(0)" class="fs-five d1-color mt-2 mt-md-3 mb-3 mb-md-6 d-block fw-bold">
                  You will destroy yourself financially if you save
                </a>
                <div class="d-flex gap-2 flex-wrap justify-content-between align-items-center">
                  <div class="d-flex gap-2 align-items-center">
                    <img src="static/picture/team8.png" alt=" testimon" class="testimonial_img">

                    <span class="fs-eleven d-block d2-color fw-medium">David Smith</span>
                  </div>
                  <span class="d2-color">May 10, 2024 </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Blogs section end -->

    <!-- FAQs section start -->
    <section class="pt-120 pb-120 bgc1-color">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">FAQ's</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Frequently Asked
            <span class="y2-color text-decoration-underline">Questions</span>
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="row g-2 g-md-6 mt-5 mt-md-10">
          <div class="col-lg-6">
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can you provide of all IT Managenment services?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can I change plans later on?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2 cursor-pointer">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can I try before I buy?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Will I Receive Future Updates?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Is this Servies work in my Country?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">How much I will pay?</h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    how can i sign up the contract?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can you handle ongoing maintenance?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- FAQs section end -->

    <!-- Contact section start -->
    <section class="pt-120 pb-120 bg7-color position-relative">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">Get in Touch</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Let's start working together
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="row g-3 g-md-6 mt-5 mt-md-10 position-relative z-2">
          <div class="col-lg-8">
            <form id="contact-form" class="contact-form bg14-color py-5 py-md-10 px-4 px-md-8 border cus-border border-seven rounded-4">
              <div class="d-sm-flex gap-3 gap-lg-6 mb-4 mb-md-8">
                <div class="w-100">
                  <label class="d2-color fs-ten mb-1">Name:</label>
                  <input type="text" class="d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Rachel Roth" id="name" required="">
                </div>
                <div class="w-100 mt-3 mt-sm-0">
                  <label class="d2-color fs-ten mb-1">Email address:</label>
                  <input type="email" class="d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Name@ examples" id="email" required="">
                </div>
              </div>
              <div class="mb-4 mb-md-8">
                <label class="d2-color fs-ten mb-1">Subject:</label>
                <input type="text" class="d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Write your Subject" id="subject" required="">
              </div>
              <div class="mb-5 mb-md-10">
                <label class="d2-color fs-ten mb-1">Message:</label>
                <textarea class="h-135 d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Rachel Roth" id="message" required=""></textarea>
              </div>
              <button class="btn2 d1-color" id="contact-submit-btn">
                <span class="btn-text-one">Send Message</span>
                <span class="btn-text-two">Send Message</span>
              </button>
            </form>
          </div>
          <div class="col-lg-4">
            <div class="bgg1-color px-5 px-lg-10 py-8 py-md-15 rounded-4">
              <div class="mb-5 mb-md-6 mb-xxl-11">
                <h4 class="fs-five w3-color mb-2">Our address info</h4>
                <span class="w4-color fs-eleven">2 Embarcadero Center, San Francisco, CA 94111 USA</span>
              </div>
              <div class="mb-5 mb-md-6 mb-xxl-11">
                <h4 class="fs-five w3-color mb-2">Phone:</h4>
                <span class="w4-color fs-eleven d-block mb-2">+1 (800) 555-1212</span>
                <span class="w4-color fs-eleven d-block">+1 (800) 555-1212</span>
              </div>
              <div class="mb-5 mb-md-6 mb-xxl-11">
                <h4 class="fs-five w3-color mb-2">Email:</h4>
                <span class="w4-color fs-eleven d-block mb-2"><a href="email-protection.html" class="__cf_email__" data-cfemail="b4c7c1c4c4dbc6c0f4d0dbd9d5ddda9ad7dbd9">[email&#160;protected]</a></span>
                <span class="w4-color fs-eleven d-block"><a href="email-protection.html" class="__cf_email__" data-cfemail="2841464e47684d50494558444d064b4745">[email&#160;protected]</a></span>
              </div>
              <div class="social_info">
                <h4 class="fs-five w3-color mb-2 mb-md-4">Our Social info</h4>
                <div class="d-flex flex-wrap gap-3">
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-facebook-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-x-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-linkedin-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-instagram-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-youtube-logo fs-six w3-color"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="position-absolute left-0 bottom-0 z-1 d-none d-xl-block">
        <img src="static/picture/contact-arrow.png" alt="..." class="contact-arrow">
      </div>
    </section>
    <!-- Contact section end -->

    <!-- subscribe sectiion start -->
    <section class="py-6 py-md-10 bg2-color overflow-hidden">
      <div class="container">
        <div class="row g-3 align-items-center justify-content-between">
          <div class="col-lg-6">
            <p class="w3-color fs-five">
              Subscribe to our newsletter or
              <span class="y1-color fs-five">follow @techxly</span> on Instagram
              for latest update
            </p>
          </div>
          <div class="col-lg-5">
            <form id="subscribe-form">
              <div class="d-flex align-items-center gap-2 px-4 px-md-8 py-2 py-md-4 border rounded-pill">
                <input type="email" id="email" placeholder="Name@examples" class="fs-ten border-0 outline-none focus:outline-none w3-color">
                <button id="subscribe-btn" class="subscribe-btn flex-shrink-0 cursor-pointer">
                  <i class="ph-fill ph-paper-plane-tilt"></i>
                </button>
              </div>
            </form>
            <p class="w3-color mt-3 mt-md-5">
              * We will not share your personal information with anyone
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- subscribe sectiion end -->

    <!-- Footer section start -->
    <section class="bgd4-color footer_section">
      <div class="pt-120 pb-120">
        <div class="container">
          <div class="row g-6 justify-content-between">
            <div class="col-12 col-xl-4">
              <div class="mb-3 mb-lg-6">
                <img src="static/picture/logo.png" alt="logo">
              </div>
              <p class="w3-color fs-ten">
                We have 14+ years experience. Helping you overcome technology
                challenges. Join the thriving Techxly it solution agency.
              </p>
              <div class="mt-4 mt-md-8">
                <div class="d-flex gap-2 gap-md-4 align-items-center mb-3 mb-md-5">
                  <i class="ph-fill ph-map-pin fs-six w3-color"></i>
                  <span class="w3-color fs-ten">2 Embarcadero Center, San Francisco, CA 94111 USA</span>
                </div>
                <div class="d-flex gap-2 gap-md-4 align-items-center mb-3 mb-md-5">
                  <i class="ph-fill ph-phone-incoming fs-six w3-color"></i>
                  <a href="tel:+1-847-555-5555" class="fs-ten">+1 (800) 555-1212</a>
                </div>
                <div class="d-flex gap-2 gap-md-4 align-items-center">
                  <i class="ph-fill ph-envelope fs-six w3-color"></i>
                  <a href="email-protection.html#0e7d61636b61606b4e6b766f637e626b206d6163" class="fs-ten"><span class="__cf_email__" data-cfemail="7e0d0b0e0e110c0a3e1a11131f1710501d1113">[email&#160;protected]</span></a>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-2">
              <h4 class="fs-five w3-color mb-3 mb-md-5">Our Social info</h4>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Web Design</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">App Development</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Cloud Services</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Domain & Hosting</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Seo Optimization</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Digital Marketing</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Cyber Security</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Brand Identity</span>
              </a>
            </div>
            <div class="col-sm-6 col-xl-2">
              <h4 class="fs-five w3-color mb-3 mb-md-5">Information</h4>
              <a href="about.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">About</span>
              </a>
              <a href="price.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Pricing</span>
              </a>
              <a href="team.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Team</span>
              </a>
              <a href="portfolio.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Portfolio</span>
              </a>
              <a href="faqs.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">FAQs</span>
              </a>
              <a href="blog.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Blogs</span>
              </a>
              <a href="javascriopt:void(0)" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Coming Soon</span>
              </a>
            </div>
            <div class="col-12 col-xl-3">
              <h4 class="fs-five w3-color mb-3 mb-md-5">Follow Us</h4>

              <div class="d-flex flex-column gap-3">
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-facebook-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Facebook</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-x-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Twitter</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-linkedin-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Linkedin</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-instagram-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Instagram</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-youtube-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Youtube</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="border cus-border border-four my-0">
      <div class="container d-flex flex-row-reverse sm:gap-3 flex-wrap justify-content-md-between justify-content-center py-3 py-md-6">
        <div class="d-flex gap-4">
          <a href="terms.html" class="w3-color sm:fs-ten footer_tag">Terms & Conditions</a>
          <span class="w3-color sm:fs-ten">|</span>
          <a href="privacy.html" class="w3-color sm:fs-ten footer_tag">Privacy Policy</a>
        </div>
        <span class="w3-color sm:fs-ten text-center">Copyright &copy; 2024.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> |
         
          
        </span>
      </div>
    </section>
    <!-- Footer section end -->

    <!-- tilt js -->
    <script data-cfasync="false" src="static/js/email-decode.min.js"></script><script src="static/js/vanilla-tilt.min.js"></script>
    <script src="static/js/plugins.js"></script>
    <script src="static/js/main.js"></script>
    <script src="static/js/swiper-bundle.min.js"></script>
    <script src="static/js/aos.js"></script>
    <script src="static/js/custom-plugin.js"></script>
    <!-- glightbox  -->
    <script src="static/js/glightbox.min.js"></script>
    <script>
      var lightboxVideo = GLightbox({
        selector: ".glightbox3",
      });
    </script>
    <script type="text/javascript" src="static/js/email.min.js"></script>
  	
</body>
</html>
